import React, { Fragment } from 'react';
import { ColumnsType } from 'antd/es/table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Button, Table } from 'antd';
import InvCheckModal from './InvCheckModal';
import { momentAll } from '@/utils/utils';
import InvCheckSearch from './InvCheckSearch';


interface User {
  key: number;
  adjustment: string;
  examineMem: string;
  adjustWarehouse: string;
  adjustMentConfirm: string;
  count: string;
  status: string;
  examineDate: string;
  adjustMentId: string;
  adjustMentMem: string;
  adjustBegin: string;
  adjustMentOrderId: string;
  adjustMentResDate: string;

}
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      defaultParams: {},
      visible: false,
      formVals: {},
      editStatus: false,
      list:[],
    };
  }
  // componentDidMount，（装载完成），在render之后调用
  componentDidMount() {
    this.query();
  }
  query = () => {
    //list 接口
    this.setState({
      list: [
      {
        adjustment: '陈诚',
        examineMem: '王敏川',
        adjustWarehouse: '物料',
        count: '381',
        status: '正常',
        examineDate: '2021-06-21',
        adjustMentId: '20210621001',
        adjustBegin: '2021-06-21',
        adjustMentConfirm: '2021-06-21',
        adjustMentResDate: '2021-06-21',
        adjustMentOrderId: '934823904',
      }
      ]
    })
  };
  //   switchModal = (visible: boolean, record: any = null) => {
  //     this.setState({ visible, record });
  //   };
  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false) => {
    let newFormVals = {};
    if (formVals) {
      // for (let key in formVals) {
      //   newFormVals[key.toLocaleLowerCase()] = formVals[key];
      // }
      newFormVals = momentAll(newFormVals);
    }
    this.setState({
      visible,
      formVals,
      editStatus,
    });
  };

  /**
   *
   * @returns 搜索
   */
  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        pageNumber: 1,
      },
      this.query,
    );
  };
  /**
   * 控制新增，编辑事件
   */
  handleSubmit = async (values: any) => {
    const { editStatus } = this.state;
    // const { dispatch } = this.props;
    if (editStatus) {
      // await dispatch({
      //   type: '#/edit',
      //   payload,
      // });
    } else {
      // await dispatch({
      //   type: '#/add',
      //   payload,
      // });
    }
    this.query();
  };
  render() {
    const columns: ColumnsType<User> =[
      {
        title: '序号',
        key: 'index',
        width: 80,
        render: (_: any, __: any, i: any) => i + 1,
      },
      {
        title: '操作员 ',
        dataIndex: 'adjustment',
        width: 80,
      },
      {
        title: '调整日期',
        dataIndex: 'adjustWarehouse',
        width: 120,
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 80,
      },
      {
        title: '审核日期',
        dataIndex: 'examineDate',
        width: 120,
      },

      {
        title: '盘点仓库',
        dataIndex: 'adjustMentId',
        width: 100,
      },
      {
        title: '盘点开始日期',
        dataIndex: 'adjustBegin',
        width: 120,
      },
      {
        title: '盘点编号',
        dataIndex: 'adjustMentOrderId',
        width: 120,
      },
      {
        title: '盘点确认日期',
        dataIndex: 'adjustMentConfirm',
        width: 150,
      },
      {
        title: '盘点结束日期',
        dataIndex: 'adjustMentResDate',
        width: 150,
      },
      {
        title: '操作',
        key: 'action',
        fixed:'right',
        render: (_: any, record: any) => (
          <Fragment>
            <Button
              size="small"
              type="primary"
              title="编辑"
              onClick={() => this.switchVisible(true, { ...record }, true)}
            >
              编辑
            </Button>
          </Fragment>
        ),
      },
    ];

    const { visible, formVals, editStatus, defaultParams,list } = this.state;
    return (
      <PageHeaderWrapper title={false}>
        <Card title="库存盘点">
          <InvCheckSearch
            defaultParams={{ ...defaultParams }}
            onSearch={this.handleSearch}
          ></InvCheckSearch>
          <Table
            rowKey="adjustMentId"
            dataSource={list}
            columns={columns}
            scroll={{ x: 'max-content' }}
            size="small"
          />
          <InvCheckModal
            visible={visible}
            formVals={formVals}
            editStatus={editStatus}
            onCancel={this.switchVisible}
            onSubmit={this.handleSubmit}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default ViewPage;
